
<template>
  <div class="reporthot">
       <div id="box">
            <ul id="con1" ref="con1" :class="{anim:animate==true}">
                <router-link class="pointer" tag="li" to="/monite/1" v-for='(item,index) in items' :key="index" :class="{err:item.status!=1}">
                    <span>{{item.date}}</span>
                    <span>{{item.name}}</span>
                    <span>采集数据：{{item.msg}}</span>
                </router-link>
            </ul>
        </div> 
  </div>
</template>

<script>
import { formatDate } from "@/utils/common.js";
import tableData from '@/utils/table-data.js'
let timer = null
export default {
  props:['datas'],
  name: "reporthot",
  data() {
    return {
      animate: false,
      items: [
        
      ]
    };
  },
  created() { 
    curItemData.forEach((e)=>{
      this.curData(e)
    })
    timer = setInterval(this.scroll, 6100);
  },
  watch:{
    datas(val){
      let d = JSON.parse(val)
      this.items.shift()
      this.curData(d)
    }
  },
  methods: {
    scroll() {
      this.animate = true; // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
      setTimeout(() => {
        //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
        this.items.push(this.items[0]); // 将数组的第一个元素添加到数组的
        this.items.shift(); //删除数组的第一个元素
        this.animate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
      }, 500);
    },
    curData (d){
    if(d.status=='正常'){
        this.items.push({
          name:d.name+'采集成功',
          date:d.date,
          status: 1,
          msg:d.water_number+'立方米'
        })
      }else{
         this.items.push({
          name:d.name+'采集异常',
          date:d.date,
          status: 2,
          msg:'采集异常'
        })
      }
    }
  },
  beforeDestory(){
      clearInterval(timer)
  }
};
</script>

<style scoped lang="less">
#box{
    width: 100%;
    height: 32px;
    overflow: hidden;
    text-align: center;
    // border: 1px solid bla    ck;
}
.anim{
    transition: all 0.5s;
    margin-top: -30px;
}
#con1 li{
    list-style: none;
    line-height: 30px;
    height: 30px;
    color:green;
    font-size: 12px;
}
#con1 li.err{
    color:red;
}
</style>

